<template>
  <view class="charging-detail">
    <!-- 顶部导航 -->
    <CustomNavBar title="电场详情">
      <!-- <template #right>
        <uni-icons type="more-filled" size="20" color="#333" />
      </template> -->
    </CustomNavBar>

    <!-- 顶部 banner -->
    <image class="banner" mode="aspectFill"/>

    <!-- 概览信息 -->
    <view class="summary">
      <view class="title-row">
        <text class="title">新宇建筑楼充电桩场地</text>
        <image class="star" src="/static/images/star.png"/>
      </view>
      <view class="status-row">
        <text class="status">开放中</text>
        <text class="recent">最近3天有50人充电成功</text>
      </view>
      <view class="meta-row">
        <text class="label">评分</text>
        <text class="value">4.0</text>
      </view>
      <view class="meta-row">
        <text class="label">地址</text>
        <text class="value">新宇建筑楼充电桩场地</text>
      </view>
    </view>

    <!-- 充电桩信息卡片 -->
    <view class="section">
      <text class="section-title">充电桩信息</text>
      <view class="card">
        <view class="card-top">
          <view class="status-item fast"  @click="setChargeType('fast')">
            <text class="type">快</text>
            <text class="space">空闲 12/20</text>
          </view>
          <view class="status-item slow" @click="setChargeType('slow')">
            <text class="type">慢</text>
            <text class="space">空闲 20/20</text>
          </view>
        </view>
        <view class="card-divider"><view class="card-divider-accent" :style="accentStyle"></view></view>

        <view class="slot-list">
          <view class="slot-item" v-for="(slot, idx) in displaySlots" :key="idx">
            <view class="slot-badge" :class="slot.status === 'empty' ? 'empty' : 'occupied'"><text>{{ slot.status === 'empty' ? '空' : '占' }}</text></view>
            <view class="slot-texts">
              <text class="slot-title">{{ slot.title }}</text>
              <text class="slot-desc">{{ slot.desc }}</text>
            </view>
          </view>
        </view>

        <view class="expand-row">
          <text class="expand-text">展开全部充电桩</text>
          <uni-icons type="bottom" size="14" color="#00C2A0"/>
        </view>
      </view>
    </view>

    <!-- 电站详情 -->
    <view class="section">
      <text class="section-title">电站详情</text>
      <view class="detail-list">
        <text class="detail-subtitle">停车价格</text>
        <text class="detail-block-value">免费停车</text>
        <text class="detail-subtitle">营业信息</text>
        <view class="detail-row">
          <text class="k">支付方式</text>
          <text class="v">本APP、微信、支付宝</text>
        </view>
        <view class="detail-row">
          <text class="k">营业时间</text>
          <text class="v">周一至周日 00:00-24:00</text>
        </view>
        <view class="detail-row">
          <text class="k">服务提供</text>
          <text class="v">听歌共享充电桩</text>
        </view>
        <view class="detail-row">
          <text class="k">发票提供</text>
          <text class="v">听歌共享充电桩</text>
        </view>
        <view class="detail-row">
          <text class="k">客服热线</text>
          <text class="v">0001-00000000</text>
        </view>

        <text class="detail-subtitle">温馨提示</text>
        <view class="detail-tip">
          因使用本场站设备充电出现相关问题如设备故障，安全问题等请及时联系该场站运营商
        </view>
      </view>
    </view>

    <!-- 底部宣传 banner -->
    <view class="promo-card">
      <image class="promo-image" src="/static/images/banner_small.png" mode="widthFix"/>
    </view>

    <!-- 价格与链接行 -->
    <view class="price-row">
      <view class="left">
        <text class="price">¥0.7100/度</text>
        <text class="time">当前时段 11:00-13:00</text>
      </view>
      <view class="right">
        <text class="link">查看收费时段表</text>
        <uni-icons type="right" size="14" color="#1CCCB4"/>
      </view>
    </view>

    <!-- 主按钮 -->
    <view class="bottom-btn">扫码充电</view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import CustomNavBar from '@/components/CustomNavBar.vue'

// 顶部“快/慢”切换状态
const activeChargeType = ref('fast')
const setChargeType = (type) => { activeChargeType.value = type }

// 不同充电类型的车位列表（示例数据）
const fastSlots = ref([
  { status: 'empty', title: '1号车位', desc: '龙里小区负1层A234车位' },
  { status: 'empty', title: '2号车位', desc: '龙里小区负2层B001车位' },
  { status: 'occupied', title: '3号车位', desc: '龙里小区负2层C088车位' }
])

const slowSlots = ref([
  { status: 'empty', title: '1号车位', desc: '龙里小区负1层A234车位' },
  { status: 'empty', title: '2号车位', desc: '龙里小区负2层B001车位' },
  { status: 'empty', title: '3号车位', desc: '龙里小区负2层C088车位' }
])

const displaySlots = computed(() => activeChargeType.value === 'fast' ? fastSlots.value : slowSlots.value)

// Tabs指示线位置样式
const accentStyle = computed(() => ({
  left: activeChargeType.value === 'fast' ? '25%' : '75%',
  transform: 'translateX(-50%)'
}))
</script>

<style scoped>
.charging-detail {
  width: 390px;
  height: 1507px;
  background: #fcf8f8;
  margin: 0 auto;
}

.nav {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.nav-title {
  margin-left: 8px;
  font-size: 16px;
  color: #333;
}

.nav-actions {
  margin-left: auto;
}

.banner {
  width: 100%;
  height: 180px;
  border-radius: 8px;
}

.summary {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.title-row {
  display: flex;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #111;
}

.star {
  margin-left: auto;
  width: 18px;
  height: 18px;
}

.status-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}

.status {
  color: #00C2A0;
  font-size: 14px;
}

.recent {
  color: #9aa0a6;
  font-size: 12px;
}

.meta-row {
  margin-top: 8px;
  display: flex;
}

.label {
  width: 40px;
  color: #666;
  font-size: 13px;
}

.value {
  color: #999;
  font-size: 13px;
}

.section {
  padding: 12px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  padding-left: 12px;
}

.card {
  margin-top: 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 12px;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
}

.status-item { display: flex; align-items: baseline; justify-content: center; gap: 6px; font-size: 14px; cursor: pointer; position: relative; padding-bottom: 6px; flex: 1; }
.status-item.fast .type { color: #ff8a47; font-weight: 600; }
.status-item.slow .type { color: #1CCCB4; font-weight: 600; }
.status-item .space { color: #666; }

/* 选中态下的底部高亮线条 */
.status-item.fast.active { border-bottom: 2px solid #ff8a47; }
.status-item.slow.active { border-bottom: 2px solid #1CCCB4; }

.card-divider { height: 1px; background: #eaeef2; position: relative; }
.card-divider-accent { position: absolute; top: -1px; left: 20px; width: 72px; height: 2px; background: #1CCCB4; border-radius: 1px; transition: left .25s ease; }

.card-header {
  display: flex;
  gap: 10px;
}

.tag-combo {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 14px;
  overflow: hidden;
}

.segment {
  font-size: 12px;
  padding: 2px 10px;
}

.tag-combo.fast {
  border-color: #ff8a47;
}

.tag-combo.fast .left {
  background: #ff8a47;
  color: #fff;
}

.tag-combo.fast .right {
  background: #fff;
  color: #ff8a47;
}

.tag-combo.slow {
  border-color: #1CCCB4;
}

.tag-combo.slow .left {
  background: #1CCCB4;
  color: #fff;
}

.tag-combo.slow .right {
  background: #fff;
  color: #1CCCB4;
}

.slot-list {
  margin-top: 10px;
}

.slot-item {
  display: flex;
  align-items: center;
  padding: 25px 0;
  border-bottom: 1px solid #f0f0f0;
}

.slot-item:last-child {
  border-bottom: none;
}

.slot-badge { width: 28px; height: 28px; border-radius: 6px; border: 1px solid; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.slot-badge.empty { color: #1CCCB4; border-color: #1CCCB4; }
.slot-badge.occupied { color: #999; border-color: #999; }

.slot-texts {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}

.slot-title {
  font-size: 14px;
  color: #333;
}

.slot-desc {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.expand-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #00C2A0;
  font-size: 12px;
}

.expand-text {
  margin-right: 4px;
}

.detail-list {
  margin-top: 8px;
  border-radius: 10px;
  padding: 12px;
}

.detail-row {
  display: flex;
  /* justify-content: space-between; */
  padding: 9px 0;
}

.detail-row .k {
  color: #999;
  font-size: 14px;
}

.detail-row .v {
  color: #333;
  font-size: 14px;
  padding-left:20px;
}

.detail-subtitle {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  display: block;
}

.detail-block-value {
  margin-top: 10px;
  color: #9aa0a6;
  font-size: 15px;
  display: block;
}

.detail-tip {
  margin-top: 6px;
  color: #8898a6;
  font-size: 12px;
  line-height: 1.6;
}

.promo-card {
  padding: 0 12px;
  margin-top: 8px;
}

.promo-image {
  width: 100%;
  border-radius: 10px;
}

.price-row {
  margin: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left {
  display: flex;
  flex-direction: column;
}

.price {
  color: #1CCCB4;
  font-size: 16px;
  font-weight: 600;
}

.time {
  margin-left: 0;
  margin-top: 4px;
  color: #666;
  font-size: 13px;
}

.right {
  display: flex;
  align-items: center;
}

.link {
  color: #1CCCB4;
  font-size: 15px;
  margin-right: 4px;
}

.bottom-btn {
  margin: 0 12px;
  background: #1DCFB7;
  color: #fff;
  text-align: center;
  border-radius: 24px;
  padding: 12px 0;
  font-size: 16px;
}
</style>
